
const data = {
  nodes: [
    {
      id: '0',
      // label: '0',
      size: 25,
      cluster: 'a',
      icon: {
        show: true,
        img: '../svg/shop.svg', 
        width: 16,
        height: 16,
      },
    }
  ],
  edges: [],
};

const container = document.getElementById('mountNode');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
  container: 'mountNode',
  width,
  height,
  fitView:true,
  modes: {
    default: ['drag-canvas', 'drag-node'],
  },
  animate: true,
  defaultNode: {
    size: 20,
    type: 'circle', // 节点类型
    style: {
      lineWidth: 1,
      stroke: '#8a8c8e',
      fill: '#d3d7d4',
    },
    labelCfg: {
      position: 'bottom',
      offset: 5,
      style: {
        fill: '#666',
        fontSize:6
      },
    },
  },
  defaultEdge: {//线、箭头
    // type:'arc',
    size: 1,
    color: '#F0F0F0',
    style: {
        endArrow: {
          path: G6.Arrow.triangle(5, 5,3),
          d:5
          },
        // stroke: '#eaff8f',//线颜色
        lineWidth: 1,
    },
    labelCfg: {
      // refY: -10,
      // refX: 20,
      style:{
        fontSize:1,
        // fill:'#eaff8f'
      }
    },
  },
  layout: {//图样式
    type: 'fruchterman',
    gpuEnabled: true,
    maxIteration: 1000,
    gravity:10,//重力大小，影响布局的紧凑程度
    // clustering:true,//是否按照聚类布局
  },
  modes: {
    default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
  },
  // 节点不同状态下的样式集合
  nodeStateStyles: {
    // 鼠标点击节点，即 click 状态为 true 时的样式
    click: {
      stroke: '#7fb80e',
      lineWidth: 1.5,
    },
  },
  edgeStateStyles:{
    // 鼠标 hover 上节点，即 hover 状态为 true 时的样式
    hover: {
      stroke: 'steelblue',
    },
  }
});





graph.on('node:click', (ev) => {
  //设置详细信息显示
  const shape = ev.target;
  const node = ev.item;
  // console.log(node._cfg.id)
  if(node._cfg.id=='0'){
    let item=document.querySelector('#item')
    let pList=document.querySelectorAll('#item>span')
    if(item.style.display=='block'){
      item.style.display='none'
    }else{
      item.style.display='block'
      item.style.top=(shape.cfg.canvasBBox.y)+5+'px'
      item.style.left=(shape.cfg.canvasBBox.x)+5+'px'
      pList[0].innerHTML=enterpriseAttribute.公司名称
      pList[1].innerHTML=enterpriseAttribute.公司注册资金
      pList[2].innerHTML=enterpriseAttribute.公司成立日期
      pList[3].innerHTML=enterpriseAttribute.公司人员规模
      pList[4].innerHTML=enterpriseAttribute.公司所属行业
      pList[5].innerHTML=enterpriseAttribute.公司所属地区
    }
  }else{
    let items=document.querySelector('#items')
    if(items.style.display=='block'){
      items.style.display='none'
    }else{
      items.style.display='block'
      items.style.top=(shape.cfg.canvasBBox.y)+5+'px'
      items.style.left=(shape.cfg.canvasBBox.x)+5+'px'
      if(node._cfg.model.cluster=='News'){
        document.querySelector('#items').innerHTML=
        'node_type:'+News[parseInt(node._cfg.id.slice(4))].node_type+'<br/>'+
        'RELEASE_DATE:'+News[parseInt(node._cfg.id.slice(4))].RELEASE_DATE+'<br/>'+
        'TITLE:'+News[parseInt(node._cfg.id.slice(4))].TITLE
      }else if(node._cfg.model.cluster=='INVESTING'){
        document.querySelector('#items').innerHTML =
        'node_type:'+INVESTING[parseInt(node._cfg.id.slice(9))].node_type+'<br/>'+
        'ESTABLISHMENT_DATE:'+INVESTING[parseInt(node._cfg.id.slice(9))].ESTABLISHMENT_DATE+'<br/>'+
        'REGISTERED_CAPITAL_AMOUNT:'+INVESTING[parseInt(node._cfg.id.slice(9))].REGISTERED_CAPITAL_AMOUNT
      }else if(node._cfg.model.cluster=='INVOLVE_CASE_Judgment'){
        document.querySelector('#items').innerHTML =
        'RELEASE_DATE:'+INVOLVE_CASE_Judgment[parseInt(node._cfg.id.slice(8))].RELEASE_DATE+'<br/>'+
        'CASE_NUM:'+INVOLVE_CASE_Judgment[parseInt(node._cfg.id.slice(8))].CASE_NUM+'<br/>'+
        'CASE_ORIGIN:'+INVOLVE_CASE_Judgment[parseInt(node._cfg.id.slice(8))].CASE_ORIGIN
      }else if(node._cfg.model.cluster=='INVOLVE_CASE_CourtAnnounce'){
        document.querySelector('#items').innerHTML =
        'node_type:'+INVOLVE_CASE_CourtAnnounce[parseInt(node._cfg.id.slice(26))].node_type+'<br/>'+
        'CASE_NUM:'+INVOLVE_CASE_CourtAnnounce[parseInt(node._cfg.id.slice(26))].CASE_NUM+'<br/>'+
        'TYPE:'+INVOLVE_CASE_CourtAnnounce[parseInt(node._cfg.id.slice(26))].TYPE+'<br/>'+
        'CASE_ORIGIN:'+INVOLVE_CASE_CourtAnnounce[parseInt(node._cfg.id.slice(26))].CASE_ORIGIN+'<br/>'+
        'RELEASE_DATE:'+INVOLVE_CASE_CourtAnnounce[parseInt(node._cfg.id.slice(26))].RELEASE_DATE
      }else{items.style.display='none'}
    }
  }

  // 先将所有当前是 click 状态的节点置为非 click 状态
  const clickNodes = graph.findAllByState('node', 'click');
  clickNodes.forEach((cn) => {
    graph.setItemState(cn, 'click', false);
  });
  const nodeItem = ev.item; // 获取被点击的节点元素对象
  graph.setItemState(nodeItem, 'click', true); // 设置当前节点的 click 状态为 true
});

// 鼠标进入边
graph.on('edge:mouseenter', (e) => {
  const nodeItem = e.item; // 获取鼠标进入的节点元素对象
  graph.setItemState(nodeItem, 'hover', true); // 设置当前节点的 hover 状态为 true
  const model = nodeItem.getModel();
  model.oriLabel = model.label;
  graph.updateItem(nodeItem, {
    label: nodeItem._cfg.targetNode._cfg.model.cluster,
    labelCfg: {
      style: {
        fontSize:7,
        fill: '#FF0000',
      },
    },
  });
  // console.log(nodeItem)
});

// 鼠标离开边
graph.on('edge:mouseleave', (e) => {
  const nodeItem = e.item; // 获取鼠标离开的节点元素对象
  graph.setItemState(nodeItem, 'hover', false); // 设置当前节点的 hover 状态为 false
  // graph.setItemState(nodeItem, 'label', false);
  const model = nodeItem.getModel();
  model.oriLabel = model.label;
  graph.updateItem(nodeItem, {
    label: ``,
  });
});

if (typeof window !== 'undefined')
  window.onresize = () => {
    if (!graph || graph.get('destroyed')) return;
    if (!container || !container.scrollWidth || !container.scrollHeight) return;
    graph.changeSize(container.scrollWidth, container.scrollHeight);
  };